<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <div id="app">
        <!-- 父组件传值给子组件 -->
        <child-component title="hello vue"></child-component>
        <!-- 动态属性 -->
        <child-component :title="msg" content="我是内容"></child-component>
        <!-- props: 采用驼峰形式，xml中就必须使用短横线方式   (html不区分大小写)
                字符串模板中没有这个限制-->
        <child-component my-name="abcdef"></child-component>
        <!-- props的值的类型 : 动态属性和静态属性区别， 动态属性传的原始值-->
        <child-component :age="123" :flag="true"></child-component>
        <child-component age="123" flag="true"></child-component>
        <!-- 数组和对象 -->
        <child-component2 :arr-data="arrData" :obj-data="objData"></child-component2>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        Vue.component('ChildComponent', {
            data: function () {
                return {}
            },
            // props属性值类型：String，Number,Boolean,数组，对象
            props: ['title', 'content', 'myName', 'age', 'flag'],
            template: `<div>
                                ChildComponent ：{{title}} ----- {{content}}-------{{myName}}----{{typeof age}}----{{typeof flag}}
                            </div>`,
            methods: {
                handle: function () {
                    this.count++
                }
            },
        })

        Vue.component('ChildComponent2', {
            data: function () {
                return {}
            },
            props: ['arrData', 'objData'],
            template: `<div>
                                ChildComponent ： {{arrData[0]}}---------{{objData.name}}
                            </div>`,
            methods: {
                handle: function () {
                    this.count++
                }
            },
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "hello vue",
                arrData: ['a', 'b', 'c'],
                objData: {
                    name: 'jack'
                }
            },
            components: {

            }
        })
    </script>
</body>

</html>